<style lang="less">
     @import './index.less';
</style>

<template>
    <div>
      <Card shadow>
          <Row>
            <i-col span="20" class="margin-bottom-5">
                <Input placeholder="职务名称" size="small" style="width: 200px" v-model="searchInput"></Input>
                <Button class="margin-right-5" type="primary" size="small" @click="search">搜索</Button>
            </i-col>
            <i-col span="4">
                <add-btn class="pull-right" @addClick="add"></add-btn>
            </i-col>
          </Row>
          <Table :columns="columns" :data="positionList.data"></Table>
          <Page :current="currentPage" :total="positionList.totalCount" :page-size="pageSize" show-total @on-change="changePage"></Page>
      </Card>
      <Modal v-model="showModal" title="详细信息" width="800">
            <Row>
              <i-col span="16" offset="4">
                  <Form :model="showForm" label-position="left" :label-width="80">
                      <FormItem label="职位名称">
                          <Input v-model="showForm.position_name" disabled></Input>
                      </FormItem>
                  </Form>
              </i-col>
          </Row>
      </Modal>
      <Modal v-model="addModal" title="新建职位" width="800" ok-text="创建" @on-ok="submitAdd('addForm')" @on-cancel="cancel" :loading="loading">
          <Row>
              <i-col span="16" offset="4">
                  <Form :model="addForm" ref="addForm" :rules="ruleValidate" label-position="left" :label-width="80">
                      <FormItem label="职位名称" prop="position_name">
                          <Input v-model="addForm.position_name"></Input>
                      </FormItem>
                  </Form>
              </i-col>
          </Row>
      </Modal>
      <Modal v-model="modifyModal" title="修改职位信息" width="800" ok-text="保存" @on-ok="submitModify('modifyForm')" @on-cancel="cancel" :loading="loading">
            <Row>
              <i-col span="16" offset="4">
                  <Form :model="modifyForm" ref="modifyForm" :rules="ruleValidate" label-position="left" :label-width="80">
                      <FormItem label="职位名称" prop="position_name">
                          <Input v-model="modifyForm.position_name"></Input>
                      </FormItem>
                  </Form>
              </i-col>
          </Row>
      </Modal>
    </div>
</template>

<script>
  import addBtn from './component/access-add-button.vue';
  // import expandRow from './component/table-expand.vue';
  import deleteBtn from './component/access-delete-button.vue';
  import modifyBtn from './component/access-modify-button.vue';

  export default {
    data () {
      return {
        // data: data,
        positionList:[],
        searchInput:'',
        showModal: false,
        addModal: false,
        modifyModal: false,
        loading:true,
        conunt: 0,
        addForm: {},
        showForm: {},
        modifyForm: {},
        pageSize:15,
        currentPage:1,
        ruleValidate:{
          position_name:[
            { required: true, message: '职位不可为空', trigger: 'blur' }
          ]
        },
        columns: [
        {
            title:'序号',
            //type:'index',
            align:'center',
            render:(h,params) => {
              return h('span',{},params.index + (this.currentPage- 1) * this.pageSize + 1 )
            }
          }, {
            title: '职务名称',
            key: 'position_name',
            align:'center'
          }, {
            title: '操作',
            width: 180,
            align: 'center',
            key: 'action',
            render: (h, params) => {
              return h('div', [
                // h('Tooltip', {
                //   props: {
                //     placement: 'top',
                //     content: '查看'
                //   }
                // }, [h('Button', {
                //   props: {
                //     size: 'small',
                //     icon: 'qr-scanner',
                //     type: 'text'
                //   },
                //   on: {
                //     click: () => {
                //       this.show(params.row);
                //     }
                //   }
                // })]),
                h('Tooltip', {
                  props: {
                    placement: 'top',
                    content: '编辑'
                  }
                }, [h(modifyBtn, {
                  on: {
                    modifyClick: () => {
                      this.modify(params.row);
                    }
                  }
                }
                )]),
                h('Tooltip', {
                  props: {
                    placement: 'top',
                    content: '删除'
                  }
                }, [h(deleteBtn, {
                  on: {
                    delClick: () => {
                      this.$Modal.confirm({
                        title: '确认',
                        content: '确认删除【' + params.row.position_name + '】职务吗？',
                        onOk: () => {
                          this.remove(params.row.position_id);
                        }
                      });
                    }
                  }
                })])
              ]);
            }
          }]
      };
    },
    methods: {
      init() {
        // 不分页
        //let self = this
        // this.$http.get('/hr/positions').then((res) => {
        //   self.positionList = res.data
        // }).catch(() => {
        //   this.$Message.error('获取职位失败')
        // })

        // 分页
        this.$http.get('/hr/positions/page?position_name='+this.searchInput+'&pageSize='+this.pageSize+'&currentPage='+this.currentPage).then((res) => {
          this.positionList = res.data.returnValue
        }).catch(() => {
          this.$Message.error('职位获取失败')
        })
      },
      search() {
        this.init()
      },
      add () {
        this.addModal = true;
      },
      show (rowData) {
        this.showModal = true;
        this.showForm = rowData
      },
      modify (rowData) {
        this.modifyModal = true 
        this.modifyForm = _.cloneDeep(rowData)     
      },
      remove (id) {
        this.$http.delete('/hr/position/' + id ).then((res) => {
          this.$Message.success(res.data.message)
          this.init()
        }).catch(() => {
          this.$Message.error('删除失败，请重试！')
        })
      },
      submitAdd(name) {
        this.$refs[name].validate((valid) => {
          if(valid) {
            this.$http.post('/hr/position',this.addForm).then((res) => {
              this.$Message.success(res.data.message)
              this.addForm={}
              this.addModal = false
              this.init()
            }).catch(() => {
              this.$Message.error('创建失败，请重试！')
            })
          }else{
            setTimeout(() => {
              this.loading = false
              this.$nextTick(() => {
                this.loading = true
              })
            }, 50);
          }
        })
        
      },
      submitModify(name) {
        this.$refs[name].validate((valid) => {
          if(valid) {
            this.$http.put('/hr/position',this.modifyForm).then((res) => {
              this.$Message.success(res.data.message)
              this.modifyModal = false
              this.init()
            }).catch(() => {
              this.$Message.error('修改失败，请重试！')
            })
          }else {
            setTimeout(() => {
              this.loading = false
              this.$nextTick(() => {
                this.loading = true
              })
            }, 50);
          }
        })
      },
      cancel() {
        this.addForm = {}
        this.$refs['addForm'].resetFields()
        this.$refs['modifyForm'].resetFields()
      },
      changePage(page) {
        this.currentPage = page
        this.init()
      }
    },
    components: {
      addBtn,
      deleteBtn,
      modifyBtn
    },
    computed: {},
    watch: {},
    mounted () {
      this.init()
    }
  };
</script>
